/*
 * 公告edit组件
 * @Author: zfx
 * @Date: 2018-06-19 17:53:27
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .ivu-form-item-content {
        img {
            width: 150px;
        }
    }
</style>
<template>
	<div class="v-customer-banner-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="labelWidth(120,170)"
			name="create-form">

			<!-- 公告名 -->
			<Form-item
				:label="$t('announcement.name')"
				prop="name">
				<i-input
					v-model="formValidate.name"
					:placeholder="$t('announcement.please_select_name')"
					name="create-name"
					type="text"/>
			</Form-item>

			<!-- 标题 -->
			<Form-item
				:label="$t('announcement.title')"
				prop="title">
				<i-input
					v-model="formValidate.title"
					:placeholder="$t('announcement.please_select_title')"
					name="create-title"
					type="text"/>
			</Form-item>

			<!-- 内容-->
			<Form-item
				:label="$t('announcement.content')"
				prop="content">
				<i-input
					v-model="formValidate.content"
					:placeholder="$t('announcement.please_select_content')"
					name="create-content"
					type="text"

				/>
			</Form-item>


			<!-- 排序 -->
			<Form-item
				:label="$t('announcement.sort_order')"
				prop="sort_order">
				<InputNumber
					:min="1"

					v-model="formValidate.sort_order"
					:placeholder="$t('announcement.please_select_sort_order')"
					name="create-sort"/>
			</Form-item>


			<!-- 开始时间 -->

			<Form-item
				:label="$t('announcement.started_at')"
				prop="started_at">
				<DatePicker
					v-model="formValidate.started_at"
					:style="{width: '260px'}"
					:placeholder="$t('announcement.please_select_started_at')"
					type="datetime"
					placement="top"
					name="create-started_at"
					@on-change="changeSTDate"/>
			</Form-item>

			<!-- 结束时间 -->
			<Form-item
				:label="$t('announcement.ended_at')"
				prop="ended_at">
				<DatePicker
					v-model="formValidate.ended_at"
					:style="{width: '260px'}"
					:placeholder="$t('announcement.please_select_ended_at')"
					type="datetime"
					placement="top"
					name="create-ended_at"
					@on-change="changeEDDate"/>
			</Form-item>


			<Form-item>
				<Button
					type="primary"
					@click="handleSubmit('formValidate')">
					{{ $t('common.submit') }}
				</Button>
				<Button
					type="ghost"
					style="margin-left: 8px"
					@click="handleReset('formValidate')">
					{{ $t('common.reset') }}
				</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';
import { validateUpdateImage } from 'src/validate'; // 引入校验文件
import Uploader from 'src/views/component/Uploader';

export default {

	name: 'ManufacturerEdit',
	components: {
		Uploader,
	},
	mixins: [labelWidthMixin],
	props: {

		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		manufacturer_solo: {
			type: Object,
			default() {
				return {};
			},
		},
	},

	data() {
		return {
		   real_started_at: '', // 格式化后的开始时间


			 real_ended_at: '', // 格式化后的结束时间

			formValidate: {
				name: '', // 厂商

			 title: '', // 联系人

			 content: '', // 电话

				sort_order: 1,

				started_at: '',

				ended_at: '',
			},

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('announcement.name') }),
						trigger: 'blur,change',
					},
				],

				title: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('announcement.title') }),
						trigger: 'blur,change',
					},
				],

				content: [
					{

						required: true,
						message: this.$t('validate.required', { field: this.$t('announcement.content') }),
						trigger: 'blur,change',
					},
				],
				sort_order: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('announcement.sort_order') }),
						trigger: 'blur,change',
					},
				],
				started_at: [
					{
						required: true,
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('announcement.started_at') }),
						trigger: 'blur,change',
					},
				],
				ended_at: [
					{
						required: true,
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('announcement.ended_at') }),
						trigger: 'blur,change',
					},
				],

			},
		};
	},
	created() {
		this.initFormData();
	},
	methods: {
		initFormData() {
			if (this.manufacturer_solo) {
				// console.log(this.manufacturer_solo);

				this.formValidate.title = this.manufacturer_solo.title || '';

				this.formValidate.content = this.manufacturer_solo.content;

				this.formValidate.name = this.manufacturer_solo.name;

				this.formValidate.sort_order = this.manufacturer_solo.sort_order;

				this.formValidate.started_at = this.manufacturer_solo.started_at;

				this.formValidate.ended_at = this.manufacturer_solo.ended_at;

				this.real_started_at = this.manufacturer_solo.started_at;

				this.real_ended_at = this.manufacturer_solo.ended_at;
			}
		},

	   		/**
         * 时间选择器改变的回调
         * @param  {string} date {格式化后的时间}
         * @return {undefined}
         */
		changeSTDate(date) {
			this.real_started_at = date;
		},

		changeEDDate(date) {
			this.real_ended_at = date;
		},

		/**
         * 更新Banner信息
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			if (this.loading) return;
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('update', this.manufacturer_solo.id, this.formDataCreate());
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 手动拼接表单数据
         * @return {Object} {拼接好的表单数据}
         */
		formDataCreate() {
			const new_object = {
				_method: 'PUT',

				name: this.formValidate.name,

				title: this.formValidate.title,

				content: this.formValidate.content,

				sort_order: this.formValidate.sort_order,

				started_at: this.real_started_at,

				ended_at: this.real_ended_at,
			};
			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				switch (key) {
				case 'values':

					new_object[key].forEach((tag, index) => {
						form_data.append(`${key}[${index}]`, tag);
					});

					break;

				default:

					form_data.append(key, new_object[key]);

					break;
				}
			});
			return form_data;
		},

	},
};
</script>
